<template>
  <div>
    <div class="top">
      <div class="setUp clear-fix">
        <img src="../../assets/img/设置图标.png" alt="" />
        <img src="../../assets/img/扫描图标.png" alt="" />
      </div>

      <div class="user-info" @click="goMine">
        <div class="info">
          <div class="head">
            <img src="../../assets/img/touxiang.png" alt="" />
          </div>

          <div class="name">
            <h2>{{ username }}</h2>
            <div>
              <span>作品&nbsp;&nbsp;&nbsp;0</span>
              <span>制品&nbsp;&nbsp;&nbsp;0</span>
            </div>
          </div>

          <div class="erwei">
            <img src="../../assets/img/二维码.png" alt="" class="ma" />

            <img src="../../assets/img/去到图标.png" alt="" class="tu" />
          </div>
        </div>

        <div class="focus">
          <ul>
            <li>关注&nbsp;&nbsp;&nbsp;0</li>
            <li>粉丝&nbsp;&nbsp;&nbsp;0</li>
            <li>好友&nbsp;&nbsp;&nbsp;0</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="like">
        <div>
          <p>我的喜欢</p>
          <img src="../../assets/img/collect.png" alt="" />
        </div>
        <div>
          <p>我的收藏</p>
          <img src="../../assets/img/star.png" alt="" />
        </div>
      </div>

      <div class="organization">
        <img src="../../assets/img/touxiang.png" alt="" class="img" />
        <div class="count">
          <h2>我的社团</h2>
          <div>
            <span>社员&nbsp;&nbsp;&nbsp;15</span>
            <span>粉丝&nbsp;&nbsp;&nbsp;0</span>
          </div>
        </div>
        <img src="../../assets/img/去到图标.png" alt="" class="arrows" />
      </div>

      <div class="nav">
        <ul class="clear-fix">
          <li @click="goOrder">
            <div class="img-box">
              <img src="../../assets/img/ticket.png" alt="" />
            </div>
            <span>我的订单</span>
          </li>
          <li>
            <div class="img-box">
              <img src="../../assets/img/foot.png" alt="" />
            </div>
            <span>我的足迹</span>
          </li>
          <li>
            <div class="img-box">
              <img src="../../assets/img/comment.png" alt="" />
            </div>
            <span>我的评论</span>
          </li>
          <li>
            <div class="img-box">
              <img src="../../assets/img/info.png" alt="" />
            </div>
            <span>我的消息</span>
          </li>
          <li>
            <div class="img-box">
              <img src="../../assets/img/shop.png" alt="" />
            </div>
            <span>我的摊位</span>
          </li>
          <li @click="exit">
            <div class="img-box">
              <img src="../../assets/img/user.png" alt="" />
            </div>
            <span>退出登录</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { Toast } from "vant";

export default {
  setup() {
    const router = useRouter();
    const goMine = function () {
      router.push("/mine");
    };
    let username = ref(null);

    const getUsername = () => {
      fetch(`http://2107.wqdp.com.cn/index/tokenInfo`, {
        method: "POST",
        body: JSON.stringify({
          token: localStorage.getItem("token"),
        }),
        headers: {
          "content-type": "application/json",
        },
      }).then((rsp) =>
        rsp.json().then((res) => {
          if (res.status == 0) {
            username.value = res.result.username;
          } else {
            router.push("/login");
            console.log(res.msg);
          }
        })
      );
    };
    const goOrder = () => {
      router.push("/order");
    };
    getUsername();

    const exit = function () {
      localStorage.removeItem("token");
      Toast.success("退出成功");
      router.push("/");
    };
    return { username, goMine, exit, goOrder };
  },
};
</script>

<style lang="less" scoped>
.top {
  background-color: white;
  .setUp {
    img {
      float: right;
    }
    & :nth-child(1) {
      margin: 13px 14px 13px 0;
    }
    & :nth-child(2) {
      margin: 13px 14px 0 0;
    }
  }
  .user-info {
    box-shadow: -1px 1px 1px 1px #b6b6b6;

    .info {
      padding: 9px 14px;
      display: flex;
      flex-shrink: 0;

      .head {
        margin-right: 10px;
      }

      .name {
        font-size: 14px;
        font-family: PingFang;
        font-weight: 500;
        color: #333333;
        h2 {
          margin-top: 9px;
          margin-bottom: 15px;
        }
        div {
          span {
            font-size: 11px;
            color: #999999;
            margin-right: 10px;
          }
        }
      }
      .erwei {
        margin-left: 80px;
        padding: 15px 20px;
        .ma {
          width: 24px;
          height: 24px;
          margin-right: 15px;
        }
        .tu {
          width: 10px;
          height: 18px;
          margin-bottom: 3px;
        }
      }
    }

    .focus {
      height: 35px;
      line-height: 25px;
      ul {
        width: 375px;
        display: flex;

        font-size: 13px;
        font-family: PingFang;
        font-weight: 500;
        color: #333333;
        li {
          width: 33%;
          text-align: center;
        }
      }
    }
  }
}

.box {
  padding: 18px;
  .like {
    font-size: 14px;
    font-family: PingFang;
    font-weight: 500;
    color: #333333;
    display: flex;
    justify-content: space-around;
    margin-bottom: 18px;
    div {
      display: flex;
      width: 163px;
      height: 45px;
      background-color: #fff;
      align-items: center;
      border-radius: 9px;
      p {
        margin-left: 19px;
        margin-right: 57px;
      }
      img {
        width: 14px;
        height: 14px;
      }
    }
  }

  .organization {
    width: 313px;
    height: 72px;
    background: #ffffff;
    border-radius: 9px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .count {
      font-size: 14px;
      font-family: PingFang;
      font-weight: 500;
      color: #333333;
      h2 {
        margin-top: 9px;
        margin-bottom: 10px;
      }
      div {
        span {
          font-size: 11px;
          color: #999999;
          margin-right: 10px;
        }
      }
    }
    .img {
      border-radius: 50%;
      border: 1px solid rgb(179, 177, 177);
      margin-left: 14px;
      margin-right: 10px;
    }
    .arrows {
      width: 8px;
      margin-left: 85px;
    }
  }
  .nav {
    font-size: 11px;
    font-family: PingFang;
    font-weight: 500;
    color: #000000;
    line-height: 18px;
    ul {
      margin-top: 10px;
      li {
        float: left;
        text-align: center;
        .img-box {
          width: 45px;
          height: 45px;
          text-align: center;
          line-height: 50px;
          margin: 9px 34px;
          img {
            width: 35px;
            // height:45px;
          }
        }
      }
    }
  }
}
</style>
